<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>名画管理系统</title>
		<script src="jquery-3.7.1.js"></script>
		<style type="text/css">
			td {
				background-color: #CCCCCC;
			}
			.hidden {
				display: none;
			}
			#add-btn {
				margin: 10px;
				padding: 5px 15px;
			}
		</style>
		<script type="text/javascript">
			$(function() {
				let arr = [];
				
				// 获取数据
				$.ajax({
					type: "get",
					url: "ten.json",
					async: true,
					dataType: "json",
					success: function(data) {
						arr = data;
						renderTable();
					},
					error: function(error) {
						console.error("数据加载失败", error);
						// 即使加载失败也创建增加按钮
						createAddButton();
					}
				});
				
				// 渲染表格
				function renderTable() {
					const $table = $("table");
					$table.find("tr:gt(0)").remove();
					$.each(arr, function(index, item) {
						const $tr = $("<tr>").attr("data-id", item.id);
						$tr.append($("<td>").append($("<input>").addClass("id-input").val(item.id).prop("readonly", true)));
						$tr.append($("<td>").append($("<input>").addClass("name-input").val(item.name).prop("readonly", true)));
						$tr.append($("<td>").append($("<input>").addClass("dynasty-input").val(item.dynasty).prop("readonly", true)));
						$tr.append($("<td>").append($("<input>").addClass("author-input").val(item.author).prop("readonly", true)));
						
						const $actionTd = $("<td>");
						$actionTd.append($("<button>").addClass("edit-btn").text("编辑"));
						$actionTd.append($("<button>").addClass("delete-btn").text("删除"));
						$actionTd.append($("<button>").addClass("save-btn hidden").text("保存"));
						$actionTd.append($("<button>").addClass("cancel-btn hidden").text("取消"));
						
						$tr.append($actionTd);
						$table.append($tr);
					});
					createAddButton();
				}
				
				// 创建增加按钮行
				function createAddButton() {
					// 移除已有的增加按钮行
					$(".add-row").remove();
					
					const $addRow = $("<tr>").addClass("add-row");
					$addRow.append($("<td>").attr("colspan", "5")
						.append($("<button>").attr("id", "add-btn").text("增加")));
					$("table").append($addRow);
				}
				
				$("table").on("click", ".edit-btn", function() {
					const $tr = $(this).closest("tr");
					enterEditMode($tr);
				});
				
				$("table").on("click", ".save-btn", function() {
					const $tr = $(this).closest("tr");
					saveRow($tr);
				});
				
				$("table").on("click", ".cancel-btn", function() {
					const $tr = $(this).closest("tr");
					if (confirm("确定要取消编辑吗？所有更改将丢失。")) {
						if ($tr.hasClass("new-row")) {
							$tr.remove();
						} else {
							exitEditMode($tr);
						}
					}
				});
				
				$("table").on("click", ".delete-btn", function() {
					if (confirm("确定要删除这条记录吗？")) {
						const $tr = $(this).closest("tr");
						const id = $tr.data("id");
						arr = arr.filter(item => item.id !== id);
						renderTable();
					}
				});
				
				// 使用事件委托绑定增加按钮
				$("table").on("click", "#add-btn", function() {
					addNewRow();
				});
				
				// 添加新行
				function addNewRow() {
					const $tr = $("<tr>").addClass("new-row");
					
					// 生成新ID
					const newId = arr.length > 0 ? Math.max(...arr.map(item => item.id)) + 1 : 1;
					
					$tr.append($("<td>").append($("<input>").addClass("id-input").val(newId).prop("readonly", true)));
					$tr.append($("<td>").append($("<input>").addClass("name-input").val("").prop("readonly", false)));
					$tr.append($("<td>").append($("<input>").addClass("dynasty-input").val("").prop("readonly", false)));
					$tr.append($("<td>").append($("<input>").addClass("author-input").val("").prop("readonly", false)));
					
					const $actionTd = $("<td>");
					$actionTd.append($("<button>").addClass("save-btn").text("保存"));
					$actionTd.append($("<button>").addClass("cancel-btn").text("取消"));
					
					$tr.append($actionTd);
					$("table .add-row").before($tr);
					$tr.find(".name-input").focus();
				}
				
				// 进入编辑模式
				function enterEditMode($tr) {
					$tr.find("input").prop("readonly", false);
					$tr.find(".edit-btn, .delete-btn").addClass("hidden");
					$tr.find(".save-btn, .cancel-btn").removeClass("hidden");
					$tr.find(".name-input").focus();
				}
				
				// 退出编辑模式
				function exitEditMode($tr) {
					const id = $tr.data("id");
					const item = arr.find(i => i.id === id);
					
					if (item) {
						$tr.find(".name-input").val(item.name);
						$tr.find(".dynasty-input").val(item.dynasty);
						$tr.find(".author-input").val(item.author);
					}
					
					$tr.find("input").prop("readonly", true);
					$tr.find(".save-btn, .cancel-btn").addClass("hidden");
					$tr.find(".edit-btn, .delete-btn").removeClass("hidden");
				}
				
				// 保存行数据
				function saveRow($tr) {
					const id = parseInt($tr.find(".id-input").val());
					const name = $tr.find(".name-input").val().trim();
					const dynasty = $tr.find(".dynasty-input").val().trim();
					const author = $tr.find(".author-input").val().trim();
					
					// 验证数据完整性
					if (!name || !dynasty || !author) {
						alert("请填写完整的名称、朝代和作者信息！");
						return;
					}
					
					if ($tr.hasClass("new-row")) {
						// 新增数据
						arr.push({ id, name, dynasty, author });
						$tr.removeClass("new-row");
					} else {
						// 更新现有数据
						const index = arr.findIndex(item => item.id === id);
						if (index !== -1) {
							arr[index] = { id, name, dynasty, author };
						}
					}
					
					renderTable();
				}
			});
		</script>
	</head>
	<body>
		<table>
			<tr>
				<th>序号</th>
				<th>名称</th>
				<th>朝代</th>
				<th>作者</th>
				<th>操作</th>
			</tr>
		</table>
	</body>
</html>